<template>
	<view class="sww-prod-list sww-prod-list-column"
		:style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.price }">
		<block v-for="(item, index) in dataList" :key="index">
			<view class="sww-prod-item has_shadow" @click="goDetail(item)">
				<view class="sww-prod-top">
					<view class="prod_img_relative">
						<u-lazy-load :image="(isBuy ? item.product_img : item.logo) || vuex_config.errImg"
							img-mode="aspectFill"></u-lazy-load>
					</view>
					<no-stock v-if="item.stock <= 0"></no-stock>
				</view>
				<view class="sww-prod-content">
					<view class="sww_prod_name u-line-2">{{ isBuy ? item.product_name : item.name }}</view>

					<view class="subtitle u-line-1" v-if="vuex_config.subtitle == 1">{{ item.title }}</view>
					<view class="bot_box">
						<view class="sww-prod-bottom">
							<view class="sww-prod-price">
								<text class="u-font-26">￥</text>
								<text class="u-font-34">{{ $price(item.price) | priceFmt(false) }}</text>
								<text class="u-font-26">{{ $price(item.price) | priceFmt(true) }}</text>
							</view>
							<view class="sww-prod-cart" v-if="isBuy">立即购买</view>
							<view class="sww-prod-cart" v-else @click.stop="changeRecom(item, index)">
								{{ item.isFavorite ? '取消推荐' : '立即推荐' }}</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import noStock from '@/components/noStock.vue';
	export default {
		props: {
			dataList: {
				type: Array,
				default: []
			},
			isBuy: {
				type: Boolean,
				default: false
			} // 是否跳转购买
		},
		components: {
			'no-stock': noStock
		},
		data() {
			return {
				typeOption: {
					1: 9,
					2: 4,
					3: 3,
					4: 1
				}
			};
		},
		filters: {
			priceFmt(price, isPoint = false) {
				let [priceInt, pricePoint] = price.split('.');
				return isPoint ? (pricePoint ? '.' + pricePoint : '') : priceInt;
			}
		},
		mounted() {},

		methods: {
			changeRecom(item, index) {
				this.$u.debounce(
					() => {
						this.$login().then(() => {
							let apiName = item.isFavorite == 1 ? 'DeleteUsersFavourite' : 'AddUsersFavourite';
							this.$loading();
							this.$resPost(apiName, {
									type: 4,
									product_id: item.pk_id
								})
								.then(() => {
									this.$toast(item.isFavorite ? '已取消收藏' : '收藏成功');
									this.$emit('changeFavorite', {
										isFavorite: item.isFavorite,
										index: index
									});
								})
								.catch(() => {
									this.$hide();
								});
						});
					},
					500,
					true
				);
			},
			goDetail(item) {
				if (this.isBuy) {
					if (item.is_online == 0) {
						this.$toast('商品已下架')
						return;
					}
					if (item.fk_business_id != this.vuex_business.pk_id) {
						if (item.fk_business_id == 1000) {
							uni.navigateToMiniProgram({
								appId: 'wx779219ea3410ae6e',
								path: `/package/product/local/prod/index?id=${item.fk_pro_id}`,
								success: res => {},
								fail: err => {
									console.log('错误', err);
								}
							});
						}
						return;
					}
					this.$toProd({
						pk_id: item.fk_pro_id,
						prodType: this.typeOption[item.type]
					});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.sww-prod-list {
		padding: 10rpx 24rpx 0;
		width: 100%;

		.sww-prod-item {
			width: 100%;
			background-color: #ffffff;
			display: flex;
			border-radius: 12rpx;

			.sww-prod-top {
				width: 230rpx;
				position: relative;
				border-radius: 12rpx 12rpx 0 0;
				overflow: hidden;
				position: relative;
			}

			.sww-prod-content {
				flex: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;

				.sww_prod_name {
					font-size: 30rpx;
					font-weight: 500;
				}

				.subtitle {
					color: #999;
					font-size: 24rpx;
					margin-top: 6rpx;
					line-height: 32rpx;
				}

				.sww-prod-flash {
					font-size: 24rpx;
					color: var(--color);
					font-weight: 500;
					line-height: 60rpx;
				}

				.sww-prod-bottom {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					overflow: hidden;

					.sww-prod-price {
						color: var(--price);
						font-weight: 500;
						flex: 1;
						overflow: hidden;
						font-size: 0;

						.sww-prod-market-price,
						.sww-prod-market-price {
							text-decoration: line-through;
						}
					}

					.sww-prod-cart {
						margin-top: 4rpx;
						background-color: var(--color);
						color: #fff;
						border-radius: 20rpx;
						font-size: 24rpx;
						padding: 4rpx 0;
						width: 132rpx;
						text-align: center;
					}
				}
			}
		}
	}

	.sww-prod-list.sww-prod-list-column {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.sww-prod-item {
			width: calc(50% - 12rpx);
			flex-direction: column;
			padding: 0 0 20rpx 0;
			margin-bottom: 24rpx;

			&.has_shadow {
				box-shadow: 0 0 10rpx #cccccc;
			}

			.sww-prod-top {
				width: 100%;
				height: 0;
				padding-bottom: 100%;

				.prod_img_relative {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}

			.sww-prod-content {
				padding: 0 10rpx;

				.sww_prod_name {
					padding-top: 12rpx;
					font-size: 28rpx;
				}

				.bot_box {
					margin: auto 0 0;

					.sww-prod-bottom {
						margin-top: 4rpx;
					}
				}
			}
		}
	}
</style>
